<template>
	<view class="page-wapper">
		<globalheader title="银行卡管理">
			<!-- <template #right>
				<text class="righttext" @tap="state.edit=!state.edit">{{state.edit?"退出管理":"管理"}}</text>
			</template> -->
		</globalheader>
		<view class="page-content">
			<view class="item" v-for="(i,index) in mybank" @tap="state.index=index">
				<view class="item-top">
					<view class="left">
						<view class="top ss-flex">
							<view class="title">
								{{i.name}}
							</view>
							<view class="amount">
								{{i.mobile}}
							</view>
						</view>
						<view class="bot  ss-flex ss-row-between">
							<view class="time">
								{{i.no}}
							</view>

						</view>

					</view>
					<image v-if="state.choose" :src="state.index===index?`/static/icon_checked.png`:`/static/icon_check.png`"
						mode="" class="check"></image>
						
				</view>
				<view class="item-bot ss-flex ss-row-right" v-if="state.edit">
					<!-- <view class="icon ss-flex" @tap="edit(i.id)">
						<image src="/static/edit.png" mode=""></image>
						编辑
					</view> -->
					<view class="icon ss-flex" @tap="del(index)">
						<image src="/static/icon_del.png" mode=""></image>
						删除
					</view>
				</view>


			</view>
			<view class="" style="height: 100rpx;">

			</view>
		</view>

		<view class="button-wapper">
			<button class="button" v-if="state.choose&&mybank.length>1&&!state.edit"   @tap="choose">
				 确定
			</button>
			<button class="button" v-else  @tap="LC.$router.go('/pages/user/addbank')">
				<image src="/static/icon_add2.png" class="add"></image> 添加银行卡
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onReady,
		onReachBottom,
		onBackPress
	} from '@dcloudio/uni-app'
	import LC from '@/LC'
	let mybank = computed(() => {
		return LC.$store('user').bank
	})
	let state = reactive({
		index: 0,
		edit: true,
		choose:false,

		data: []
	})

// onBackPress(()=>{
// 	if(state.choose&&state.index!=null){
// 		uni.$emit('chooseAddress',myaddress.value[state.index])
// 	}
// 	return false
// })


	onLoad(({
		edit
	}) => {
	state.choose=edit
    state.edit=false

	})
	function choose(){
		uni.$emit('choocebank',state.index)
		LC.$router.back()
	}

	function edit(i) {
		LC.$router.go('/pages/user/addaddress', {
			id: i
		})
	}


	function del(i) {
		uni.showModal({
				title: '提示',
				content: '确认删除？',
				success: async function(res) {
				
				if (res.confirm) {
					const res = await LC.$api.pay.accountdel(mybank.value[i].id)
					if (res.code == 1) {
				
						LC.$store('user').bank.splice(i, 1)
				
						uni.$u.toast('成功')
				
					}
				
				
				
				}



				}
			
		});
	}

	function onbottom() {

		let {
			status,
			load,
			limit,
			page
		} = state.pageData

		if (status != 'nomore' && !load) {

			getmsg()


		}
	}
</script>

<style lang="scss" scoped>
	.button-wapper {
		padding: 20rpx 30rpx;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		width: 100%;
	}

	.button {

		display: flex;
		height: 86rpx;
		flex-shrink: 0;
		margin-top: auto;
		background-color: #FC5652;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 31rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;
		align-items: center;
		margin-top: 115rpx;
		justify-content: center;

		image {
			width: 31rpx;
			margin-right: 15rpx;
			height: 31rpx;
		}

		&.dis {
			background-color: #CCCCCC;
		}

		&::after {
			display: none;
		}


	}

	.item {
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 0 21rpx;
		margin-bottom: 20rpx;

		.item-top {
			display: flex;
			padding: 27rpx 0;
			align-items: center;
		}

		.item-bot {
			border-top: 2rpx solid #E1E1E1;
			padding: 15rpx;

			.icon {
				&:nth-child(1) {
					image {
						width: 40rpx;
						height: 40rpx;
					}

				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;

				}

				margin-left: 46rpx;
				font-family: PingFangSC,
				PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #666666;
				line-height: 32rpx;
			}
		}

		.check {
			width: 34rpx;
			height: 34rpx;
		}

		.left {
			flex: 1;
		}

		.top {

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}

			.time {
				margin-top: 15rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #666666;
				line-height: 34rpx;

			}

			.amount {
				margin-left: 19rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}



		}

		.bot {
			margin-top: 8rpx;

			.time {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
				line-height: 32rpx;
			}

			.amount {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}
		}
	}

	.righttext {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		white-space: nowrap;
	}

	.page-content {
		padding: 32rpx;
	}
</style>